<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">科目管理</span>
          <div class="header-actions">
            <el-button
              type="danger"
              :disabled="selectedRows.length === 0"
              @click="handleBatchDelete"
            >
              批量删除 ({{ selectedRows.length }})
            </el-button>
            <el-button type="primary" @click="handleAdd">新增科目</el-button>
          </div>
        </div>
      </template>

      <!-- 搜索区域 -->
      <div class="search-container">
        <!-- 快速筛选标签 -->
        <div class="quick-filter">
          <span class="filter-label">快速筛选：</span>
          <el-tag
            :type="searchForm.gradeLevel === undefined ? 'primary' : ''"
            :effect="searchForm.gradeLevel === undefined ? 'dark' : 'plain'"
            @click="handleQuickFilter()"
            class="filter-tag"
          >
            全部
          </el-tag>
          <el-tag
            :type="searchForm.gradeLevel === 1 ? 'primary' : ''"
            :effect="searchForm.gradeLevel === 1 ? 'dark' : 'plain'"
            @click="handleQuickFilter(1)"
            class="filter-tag"
          >
            小学
          </el-tag>
          <el-tag
            :type="searchForm.gradeLevel === 2 ? 'success' : ''"
            :effect="searchForm.gradeLevel === 2 ? 'dark' : 'plain'"
            @click="handleQuickFilter(2)"
            class="filter-tag"
          >
            初中
          </el-tag>
          <el-tag
            :type="searchForm.gradeLevel === 3 ? 'warning' : ''"
            :effect="searchForm.gradeLevel === 3 ? 'dark' : 'plain'"
            @click="handleQuickFilter(3)"
            class="filter-tag"
          >
            高中
          </el-tag>
        </div>

        <!-- 详细搜索 -->
        <el-form :model="searchForm" inline>
          <el-form-item label="科目名称">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入科目名称"
              clearable
              style="width: 200px"
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="年级层次">
            <el-select v-model="searchForm.gradeLevel" placeholder="请选择年级" clearable style="width: 150px">
              <el-option label="小学" :value="1" />
              <el-option label="初中" :value="2" />
              <el-option label="高中" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="info" @click="handleExportAll">导出全部</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 科目表格 -->
      <el-table
        v-loading="loading"
        :data="subjectList"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="科目名称" min-width="150" />
        <el-table-column prop="icon" label="图标" width="120">
          <template #default="{ row }">
            <el-image
              v-if="row.icon"
              :src="getIconUrl(row.icon)"
              style="width: 40px; height: 40px; border-radius: 4px;"
              fit="cover"
              :preview-src-list="[getIconUrl(row.icon)]"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon style="font-size: 30px; color: #c0c4cc;"><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div v-else class="image-slot">
              <el-icon style="font-size: 30px; color: #c0c4cc;"><Picture /></el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gradeLevel" label="年级层次" width="120">
          <template #default="{ row }">
            <el-tag :type="getGradeTagType(row.gradeLevel)">
              {{ getGradeName(row.gradeLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <StatusTag :status="row.status" type="normal" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button link type="info" @click="handleView(row)">查看</el-button>
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button
              link
              :type="row.status === 1 ? 'warning' : 'success'"
              @click="handleStatusChange(row)"
            >
              {{ row.status === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 统计信息 -->
      <div class="statistics-container" v-if="statistics.total > 0">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-statistic title="总科目数" :value="statistics.total" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="小学科目" :value="statistics.primary" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="初中科目" :value="statistics.middle" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="高中科目" :value="statistics.high" />
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑科目对话框 -->
    <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      width="500px"
      append-to-body
    >
      <el-form
        ref="subjectFormRef"
        :model="subjectForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="科目名称" prop="name">
          <el-input v-model="subjectForm.name" placeholder="请输入科目名称" />
        </el-form-item>
        <el-form-item label="科目图标" prop="icon">
          <div class="icon-upload-container">
            <el-upload
              class="icon-uploader"
              :action="'/upload/subject-icon'"
              :show-file-list="false"
              :before-upload="beforeIconUpload"
              :on-success="handleIconUploadSuccess"
              :on-error="handleIconUploadError"
            >
              <img
                v-if="subjectForm.icon"
                :src="subjectForm.icon"
                class="uploaded-icon"
                @error="handleImageError"
                @load="handleImageLoad"
              />
              <div v-else class="upload-placeholder">
                <el-icon class="upload-icon"><Plus /></el-icon>
                <div class="upload-text">点击上传图标</div>
              </div>
            </el-upload>
            <div class="upload-tips">
              <p>支持 jpg、png、gif 格式，文件大小不超过 2MB</p>
              <p>建议尺寸：64x64 像素</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="年级层次" prop="gradeLevel">
          <el-select v-model="subjectForm.gradeLevel" placeholder="请选择年级层次" style="width: 100%">
            <el-option label="小学" :value="1" />
            <el-option label="初中" :value="2" />
            <el-option label="高中" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sortOrder">
          <el-input-number v-model="subjectForm.sortOrder" :min="0" :max="999" style="width: 100%" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="subjectForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog.visible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 科目详情查看对话框 -->
    <el-dialog
      title="科目详情"
      v-model="viewDialog.visible"
      width="500px"
      append-to-body
    >
      <div class="subject-detail" v-if="viewDialog.data">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="科目ID">
            {{ viewDialog.data.id }}
          </el-descriptions-item>
          <el-descriptions-item label="科目名称">
            {{ viewDialog.data.name }}
          </el-descriptions-item>
          <el-descriptions-item label="年级层次">
            <el-tag :type="getGradeTagType(viewDialog.data.gradeLevel)">
              {{ getGradeName(viewDialog.data.gradeLevel) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="排序号">
            {{ viewDialog.data.sortOrder }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <StatusTag :status="viewDialog.data.status" type="normal" />
          </el-descriptions-item>
          <el-descriptions-item label="科目图标" :span="2">
            <div v-if="viewDialog.data.icon" class="icon-preview">
              <el-image
                :src="getIconUrl(viewDialog.data.icon)"
                style="width: 64px; height: 64px; border-radius: 4px;"
                fit="cover"
                :preview-src-list="[getIconUrl(viewDialog.data.icon)]"
              >
                <template #error>
                  <div class="image-slot" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px;">
                    <el-icon style="font-size: 40px; color: #c0c4cc;"><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="icon-url">{{ viewDialog.data.icon }}</div>
            </div>
            <div v-else class="icon-preview">
              <div class="image-slot" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px;">
                <el-icon style="font-size: 40px; color: #c0c4cc;"><Picture /></el-icon>
              </div>
              <div class="icon-url" style="color: #999;">暂无图标</div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialog.visible = false">关闭</el-button>
          <el-button type="primary" @click="handleEditFromView">编辑</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Picture } from '@element-plus/icons-vue'
import {
  getSubjectList,
  getAllSubjects,
  getSubjectsByGrade,
  addSubject,
  updateSubject,
  deleteSubject,
  batchDeleteSubjects,
  updateSubjectStatus,
  exportSubjectData
} from '@/api/subject'

// 数据列表
const subjectList = ref([])
const loading = ref(false)
const selectedRows = ref([])

// 搜索表单
const searchForm = reactive({
  name: '',
  gradeLevel: undefined,
  status: undefined
})

// 分页信息
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 统计信息
const statistics = reactive({
  total: 0,
  primary: 0,
  middle: 0,
  high: 0
})

// 对话框控制
const dialog = reactive({
  visible: false,
  title: ''
})

// 查看对话框控制
const viewDialog = reactive({
  visible: false,
  data: null
})

// 表单对象
const subjectForm = reactive({
  id: undefined,
  name: '',
  icon: '',
  gradeLevel: undefined,
  sortOrder: 0,
  status: 1
})

// 表单引用
const subjectFormRef = ref()

// 表单校验规则
const rules = {
  name: [
    { required: true, message: '请输入科目名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  gradeLevel: [
    { required: true, message: '请选择年级层次', trigger: 'change' }
  ],
  sortOrder: [
    { required: true, message: '请输入排序号', trigger: 'blur' }
  ]
}

// 获取科目列表
const getList = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      size: pagination.size,
      ...searchForm
    }

    // 过滤空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === undefined) {
        delete params[key]
      }
    })

    const { data } = await getSubjectList(params)
    subjectList.value = data.records || []
    pagination.total = data.total || 0

    // 更新统计信息
    updateStatistics()
  } catch (error) {
    console.error('获取科目列表失败:', error)
    ElMessage.error('获取科目列表失败')
  } finally {
    loading.value = false
  }
}

// 更新统计信息
const updateStatistics = async () => {
  try {
    const { data } = await getAllSubjects()
    statistics.total = data.length
    statistics.primary = data.filter(item => item.gradeLevel === 1).length
    statistics.middle = data.filter(item => item.gradeLevel === 2).length
    statistics.high = data.filter(item => item.gradeLevel === 3).length
  } catch (error) {
    console.error('获取统计信息失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  getList()
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    gradeLevel: undefined,
    status: undefined
  })
  pagination.page = 1
  getList()
}

// 快速筛选
const handleQuickFilter = (gradeLevel) => {
  searchForm.gradeLevel = gradeLevel
  pagination.page = 1
  getList()
}

// 导出科目数据
const handleExportAll = async () => {
  try {
    // 构建导出参数，使用当前的查询条件
    const exportParams = {
      name: searchForm.name,
      gradeLevel: searchForm.gradeLevel,
      status: searchForm.status
    }

    // 调用后端导出API
    const response = await exportSubjectData(exportParams)

    // 创建下载链接
    const blob = new Blob([response], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const link = document.createElement('a')
    const url = URL.createObjectURL(blob)
    link.setAttribute('href', url)

    // 生成文件名
    const now = new Date()
    const dateStr = now.getFullYear() +
      String(now.getMonth() + 1).padStart(2, '0') +
      String(now.getDate()).padStart(2, '0') + '_' +
      String(now.getHours()).padStart(2, '0') +
      String(now.getMinutes()).padStart(2, '0') +
      String(now.getSeconds()).padStart(2, '0')

    link.setAttribute('download', `科目数据_${dateStr}.xlsx`)
    link.style.visibility = 'hidden'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    // 清理URL对象
    URL.revokeObjectURL(url)

    ElMessage.success('科目数据导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败，请重试')
  }
}

// 分页大小改变
const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  getList()
}

// 当前页改变
const handleCurrentChange = (page) => {
  pagination.page = page
  getList()
}

// 新增科目
const handleAdd = () => {
  dialog.title = '新增科目'
  dialog.visible = true
  resetForm()
}

// 查看科目详情
const handleView = (row) => {
  viewDialog.data = { ...row }
  viewDialog.visible = true
}

// 从查看对话框进入编辑
const handleEditFromView = () => {
  viewDialog.visible = false
  dialog.title = '编辑科目'
  dialog.visible = true
  Object.assign(subjectForm, viewDialog.data)
}

// 编辑科目
const handleEdit = (row) => {
  dialog.title = '编辑科目'
  dialog.visible = true
  Object.assign(subjectForm, row)
}

// 重置表单
const resetForm = () => {
  Object.assign(subjectForm, {
    id: undefined,
    name: '',
    icon: '',
    gradeLevel: undefined,
    sortOrder: 0,
    status: 1
  })
  subjectFormRef.value?.clearValidate()
}

// 提交表单
const submitForm = async () => {
  try {
    await subjectFormRef.value?.validate()

    if (subjectForm.id) {
      await updateSubject(subjectForm)
      ElMessage.success('修改成功')
    } else {
      await addSubject(subjectForm)
      ElMessage.success('新增成功')
    }
    dialog.visible = false
    getList()
  } catch (error) {
    console.error('保存科目失败:', error)
    if (error.message) {
      ElMessage.error(error.message)
    }
  }
}

// 删除科目
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认要删除科目"${row.name}"吗？`, '警告', {
    type: 'warning'
  }).then(async () => {
    try {
      await deleteSubject(row.id)
      ElMessage.success('删除成功')
      getList()
    } catch (error) {
      console.error('删除科目失败:', error)
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 表格选择改变
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 批量删除科目
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的科目')
    return
  }

  const names = selectedRows.value.map(row => row.name).join('、')
  ElMessageBox.confirm(`确认要删除以下科目吗？\n${names}`, '批量删除确认', {
    type: 'warning',
    dangerouslyUseHTMLString: true
  }).then(async () => {
    try {
      const ids = selectedRows.value.map(row => row.id)
      await batchDeleteSubjects(ids)
      ElMessage.success(`成功删除 ${ids.length} 个科目`)
      selectedRows.value = []
      getList()
    } catch (error) {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 状态改变
const handleStatusChange = async (row) => {
  try {
    const newStatus = row.status === 1 ? 0 : 1
    await updateSubjectStatus(row.id, newStatus)
    ElMessage.success('状态更新成功')
    getList() // 刷新列表
  } catch (error) {
    console.error('状态更新失败:', error)
    ElMessage.error('状态更新失败')
  }
}

// 获取年级名称
const getGradeName = (gradeLevel) => {
  const gradeMap = {
    1: '小学',
    2: '初中',
    3: '高中'
  }
  return gradeMap[gradeLevel] || '未知'
}

// 获取年级标签类型
const getGradeTagType = (gradeLevel) => {
  const typeMap = {
    1: 'primary',
    2: 'success',
    3: 'warning'
  }
  return typeMap[gradeLevel] || 'info'
}

// 图标上传前验证
const beforeIconUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 图标上传成功
const handleIconUploadSuccess = (response) => {
  if (response.code === 200) {
    subjectForm.icon = response.data
    ElMessage.success('图标上传成功')
  } else {
    ElMessage.error(response.msg || '图标上传失败')
  }
}

// 图标上传失败
const handleIconUploadError = (error) => {
  console.error('图标上传失败:', error)
  ElMessage.error('图标上传失败，请重试')
}

// 图片加载错误处理
const handleImageError = (event) => {
  console.error('图片加载失败:', event.target.src)
  ElMessage.warning('图片加载失败，请检查网络连接')
}

// 图片加载成功处理
const handleImageLoad = (event) => {
  console.log('图片加载成功:', event.target.src)
}

// 获取图标URL，处理无效路径
const getIconUrl = (iconPath) => {
  if (!iconPath) return ''

  // 如果是完整的URL，直接返回
  if (iconPath.startsWith('http://') || iconPath.startsWith('https://')) {
    return iconPath
  }

  // 如果是相对路径，检查是否是有效的静态资源路径
  if (iconPath.startsWith('/static/')) {
    // 为不同科目提供默认图标（使用免费的图标服务）
    const subjectIconMap = {
      'xiaoshu.png': 'https://img.icons8.com/color/48/mathematics.png',
      'xiaoyingyu.png': 'https://img.icons8.com/color/48/abc.png',
      'chuyu.png': 'https://img.icons8.com/color/48/literature.png',
      'chushu.png': 'https://img.icons8.com/color/48/calculator.png',
      'chuyingyu.png': 'https://img.icons8.com/color/48/language.png',
      'wuli.png': 'https://img.icons8.com/color/48/physics.png',
      'huaxue.png': 'https://img.icons8.com/color/48/chemistry.png',
      'shengwu.png': 'https://img.icons8.com/color/48/biology.png',
      'lishi.png': 'https://img.icons8.com/color/48/history.png',
      'dili.png': 'https://img.icons8.com/color/48/geography.png',
      'zhengzhi.png': 'https://img.icons8.com/color/48/government.png',
      'gaoyu.png': 'https://img.icons8.com/color/48/literature.png',
      'gaoshu.png': 'https://img.icons8.com/color/48/calculator.png',
      'gaoyingyu.png': 'https://img.icons8.com/color/48/language.png',
      'gaowuli.png': 'https://img.icons8.com/color/48/physics.png',
      'gaohuaxue.png': 'https://img.icons8.com/color/48/chemistry.png',
      'gaoshengwu.png': 'https://img.icons8.com/color/48/biology.png',
      'gaolishi.png': 'https://img.icons8.com/color/48/history.png',
      'gaodili.png': 'https://img.icons8.com/color/48/geography.png',
      'gaozhengzhi.png': 'https://img.icons8.com/color/48/government.png',
      'test.png': 'https://img.icons8.com/color/48/test-tube.png'
    }

    // 从路径中提取文件名
    const fileName = iconPath.split('/').pop()
    return subjectIconMap[fileName] || 'https://img.icons8.com/color/48/book.png' // 默认书本图标
  }

  return iconPath
}

// 初始化
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }
  }

  .search-container {
    padding: 20px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;

    .quick-filter {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;

      .filter-label {
        font-weight: 600;
        color: #606266;
      }

      .filter-tag {
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-1px);
        }
      }
    }
  }

  .statistics-container {
    padding: 20px 0;
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 20px;

    :deep(.el-statistic__content) {
      font-size: 24px;
      font-weight: bold;
    }

    :deep(.el-statistic__head) {
      color: #909399;
      font-size: 14px;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
  }

  .image-slot {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
}

:deep(.el-table) {
  .el-table__row:hover {
    background-color: #f5f7fa;
  }
}

:deep(.el-dialog__body) {
  padding: 20px 20px 0;
}

.subject-detail {
  .icon-preview {
    display: flex;
    align-items: center;
    gap: 15px;

    .icon-url {
      font-size: 12px;
      color: #909399;
      word-break: break-all;
      flex: 1;
    }
  }
}

.icon-upload-container {
  .icon-uploader {
    :deep(.el-upload) {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        border-color: #409eff;
      }
    }

    .uploaded-icon {
      width: 78px;
      height: 78px;
      object-fit: cover;
      border-radius: 4px;
    }

    .upload-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #8c939d;

      .upload-icon {
        font-size: 24px;
        margin-bottom: 4px;
      }

      .upload-text {
        font-size: 12px;
      }
    }
  }

  .upload-tips {
    margin-top: 8px;

    p {
      margin: 0;
      font-size: 12px;
      color: #999;
      line-height: 1.4;
    }
  }
}
</style>
